<template>
    <div class="consult-container">
        <!-- 问答回复表单 -->
        <el-dialog :visible.sync="dialogVisible" title="问答回复" custom-class="consult-dialog" width="40%" @close="close">
            <el-form :model="commentData"
                     ref="commentForm"
                     :rules="commentRules"
                     status-icon>
                <el-form-item prop="content">
                    <el-input
                            v-model="commentData.content"
                            placeholder="请输入你的内容....."
                            clearable
                            type="textarea"
                            :autosize="{ minRows: 6, maxRows: 8 }"
                            show-word-limit
                            maxlength="300"
                    ></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="saveOrUpdate" round>发表评论</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import { saveComment } from '@/api/question';
  import { mapGetters } from 'vuex';
  import { validNormal } from '@/validate/register';

  export default {
    // 父组件向子组件传值
    props: {
      questionId: {
        type: String,
        default: null
      }
    },

    data () {
      //检验内容
      const validateContent = (rule, value, callback) => {
        if (value.length < 8 || value.length > 300 || !validNormal((value))){
          callback(new  Error("请输入正确的回复内容，长度要求为8-300，且不能输入特殊字符"))
        }
        else callback()
      }

      return {
        dialogVisible: false,
        commentData: {
          userId: this.userId,
          questionId: this.questionId,
          parentId: '',
          content: ''
        },
        commentRules:{
          content:[{validator: validateContent,trigger: 'blur'}],
        }
      }
    },
    methods: {
      open (commentId) {
        if (commentId){
          this.commentData.parentId = commentId
        }
        else {
          this.commentData.parentId = 0
        }
        this.dialogVisible = true
      },
      close () {
        this.dialogVisible = false
        // 重置表单
        this.resetForm()
      },
      resetForm () {
        this.commentData.parentId = ''
        this.commentData.content = ''
      },
      saveOrUpdate () {
        this.save()
      },
      save () {
        this.$refs.commentForm.validate((valid) => {
          if (valid) {
            //检验通过
            this.commentData.userId = this.userId
            saveComment(this.$qs.stringify(this.commentData)).then(result => {
              let {code, data} = result
              if (code === 20000) {
                this.dialogVisible = false
                this.$message({
                  type: 'success',
                  message: '回复成功！'
                })
                // 调用父组件监听函数
                this.$emit('onSaveSuccess')
              }
            })
          }
          else {
            return false;
          }
        })
      }
    },
    computed: {
      ...mapGetters({
        'userId': 'id'
      })
    },
  }
</script>

<style>
    .consult-dialog{
        box-shadow: 0 0 8px 4px rgba(7,17,27,0.1);
        border-radius: 12px;
    }
    .el-dialog__body{
        padding: 15px 20px 0px 20px;
    }
    .el-textarea__inner{
        font-weight: 500;
    }
    .el-button--success{
        background-color: #1fad4e;
        border: #1fad4e;
        width: 120px;
    }
</style>
